<template>
  <div>
    <MyForm ref="myForm" :data="data" :fields="ruleForm" :submitProps="submitProps" @submitCallback="submitForm">
      <!-- <template #submit>
        <el-button type="primary" @click="submit">提交</el-button>
      </template> -->
    </MyForm>
    <el-divider />
    <avue-login v-model="form" :option="option">
    </avue-login>
    <el-divider />
    <avue-form :option="option2" v-model="form2"></avue-form>
    <el-divider />
    值:{{ form2 }}<br />
    <avue-upload :action="action3" :propsHttp="propsHttp" v-model="form3" list-type="picture-card"></avue-upload>
  </div>
</template>

<script lang="ts" setup>
import MyForm from "../../components/MyForm/index.vue";

const form = ref({});
const option = ref({
  width: 400,
  time: 60,
  codeType: 'phone',
  column: {
    username: {
      label: '用户名',
      autocomplete: 'off',
      rules: { required: true, message: '请输入用户名', trigger: 'blur' }
    },
    password: {
      label: '密码',
      autocomplete: 'off',
      rules: { required: true, message: '请输入密码', trigger: 'blur' }
    },
    code: {
      hide: true
    }
  }
});


// ------------------------------------------------------------------

const action = 'https://api.avuejs.com/imgupload'
const form2 = ref({
  video: '/i/movie.ogg',
  imgUrl: [
    "/images/logo-bg.jpg",
    'https://www.w3school.com.cn/i/movie.ogg',
    'https://www.runoob.com/try/demo_source/horse.mp3'
  ],
})

const option2 = ref({
  column: [
    {
      label: '附件上传',
      prop: 'imgUrl',
      type: 'upload',
      multiple: true,
      span: 24,
      propsHttp: {
        url: 'url',
        name: 'name',
        res: 'data'
      },
      action
    },
    {
      label: '视频',
      prop: 'video',
      type: 'upload',
      propsHttp: {
        res: 'data',
        url: 'url',
        name: 'name',
        home: 'https://www.w3school.com.cn'
      },
      listType: 'picture-img',
      span: 24,
      action
    },
    {
      label: '照片墙',
      prop: 'imgUrl',
      listType: 'picture-card',
      type: 'upload',
      span: 24,
      action
    },
    {
      label: '缩略图上传',
      prop: 'imgUrl',
      type: 'upload',
      span: 24,
      listType: 'picture',
      action
    },
    {
      label: '拖拽上传',
      prop: 'imgUrl',
      type: 'upload',
      span: 24,
      dragFile: true,
      action
    },
  ]
})

// ------------------------------------------------------------------


const action3 = 'https://api.avuejs.com/imgupload'
const propsHttp = {
  url: 'url',
  name: 'name',
  res: 'data'
}

const form3 = ref([])



// ------------------------------------------------------------------

const myForm = ref();
const submitProps = ref({
  type: 'warning',
  style: {
    textAlign: 'center',
  },
});
const ruleForm = ref([
  {
    type: 'input',
    label: 'age',
    value: '123',
    placeholder: '请输入年龄',
    formCol: {
      span: 10
    },
    rules: [
      {
        required: true,
        validator: (rule: any, value: any, callback: any) => {
          if (!value) {
            return callback(new Error('请输入年龄'))
          }
          if (!Number.isInteger(+value)) {
            callback(new Error('请输入整数'))
          } else {
            callback()
          }

        }, trigger: 'blur'
      }
    ]
  },
  {
    type: 'select',
    label: 'gender',
    value: 'male',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' },
    ],
    placeholder: '请选择性别',
  },
  {
    type: 'input',
    label: 'username',
    value: '',
    placeholder: '请输入用户名',
    rules: [
      { required: true, message: '请输入用户名' }
    ]
  },
]);

// 方式
const submitForm = async (formData: any) => {
  console.log('校验结果', formData);
};

// slot方式
const submit = () => {
  myForm.value.submitForm();
};
</script>
